<!DOCTYPE html>
<html>
<head>
<title>comment.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.outDivComment,.innerDivComment {
	-webkit-user-modify: read-only;
	background-color: #FDFDE3;
	opacity: 0.95;
	background-attachment: scroll;
	background-clip: border-box;
	background-repeat: no-repeat;
	background-origin: padding-box;
	border: #999999 solid 1px;
}

.outDivComment {
	position: fixed;
	padding: 4px;
	width: 250px;
	height: 180px;
	padding: 4px;
}

.innerDivComment {
	text-transform: none;
	text-decoration: none;
	letter-spacing: normal;
	word-spacing: 0;
	line-height: 17px;
	vertical-align: baseline;
	direction: ltr;
	text-overflow: clip;
	margin: 0;
	box-sizing: content-box;
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-ms-box-sizing: content-box;
	overflow-x: visible;
	overflow-y: visible;
	white-space: normal;
	clip: auto;
	float: none;
	clear: none;
	cursor: pointer;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: disc;
	marker-offset: auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 5px;
	line-height: 17px;
	width: 238px;
	height: 168px;
}

.panelLogo {
	height: 17px;
	float: left;
	padding-left: 25px;
	background-image: url("icon/tinyComment.png");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-attachment: scroll;
	cursor: pointer;
	float: left;
}

.panelCtrlBtn {
	height: 17px;
	float: right;
	padding-right: 17px;
	background-image: url("icon/Minimize.jpg");
	background-repeat: no-repeat;
	background-position: 0 0;
	background-attachment: scroll;
	cursor: pointer;
}

.panelTitle {
	font-size: 12px;
	font-weight: bold;
	float: left;
	font-variant: normal;
	font-size-adjust: none;
	font-style: normal;
}

.panelDate {
	font-size: 12px;
	font-weight: normal;
	font-family: Calibri;
	float: left;
	font-style: normal;
	font-variant: normal;
	font-size-adjust: none;
	float: left
}

.contentComment {
	font-size: 12px;
	font-weight: normal;
	font-family: Calibri;
	font-style: normal;
	font-variant: normal;
	font-size-adjust: none;
	width: 230px;
	height: 110px;
	background-color: #FDFDE3;
}
</style>
<script type="text/javascript">
	
	function showComment(index) {
		comments["id" + index] = false;
		alert(comments["id" + index].inited);
		if (!inited) {
			init(index);
		} else {
			var cp = document.getElementById("outDivComment" + index);
			cp.style.display = "block";
			cp.style.top = getCommentIconY("iconComment" + index) + "px";
			cp.style.left = getCommentIconX("iconComment" + index) + "px";
		}
	}
	function hideComment(index) {
		var cp = document.getElementById("outDivComment" + index);
		cp.style.display = "none";
	}
	function changeToSpan(index) {
		hideComment(index);
		var tc = document.getElementById("innerDivComment" + index);
		var ta = tc.lastChild;
		var comment = ta.value;
		var sc = document.createElement("div");
		sc.setAttribute("class", "contentComment");
		sc.setAttribute("onClick", "changeToTa(" + index + ")");
		sc.innerHTML = comment;
		tc.replaceChild(sc, ta);
	}
	function changeToTa(index) {
		var tc = document.getElementById("innerDivComment" + index);
		var sc = tc.lastChild;
		var comment = sc.innerHTML;
		var ta = document.createElement("textArea");
		ta.setAttribute("class", "contentComment");
		ta.setAttribute("onBlur", "changeToSpan(" + index + ")");
		ta.value = comment;
		tc.replaceChild(ta, sc);
	}
	var comments = {};
	var inited;
	function inited(index) {
		return comments[index].inited;
	}
	function init(index) {
		var cp = document.createElement("div");
		cp.setAttribute("id", "outDivComment" + index);
		cp.setAttribute("class", "outDivComment");
		cp.innerHTML = "<div class='innerDivComment' id='innerDivComment"+index+"'>"
				+ "<span class='panelLogo'></span>"
				+ "<span class='panelTitle'>Administrator</span>"
				+ "<span class='panelCtrlBtn' onclick='hideComment(1)'></span><br>"
				+ "<span class='panelDate'>"
				+ getCurrentTime()
				+ "</span><br><hr>"
				+ "<textArea class='contentComment' onblur='changeToSpan("
				+ index + ")'></textArea>" + "</div>";
		cp.style.top = getCommentIconY("iconComment" + index) + "px";
		cp.style.left = getCommentIconX("iconComment" + index) + "px";
		cp.style.display = "block";
		document.body.appendChild(cp);
		inited = true;
	}
	function getCommentIconX(id) {
		return document.getElementById(id).offsetLeft - 1;
	}
	function getCommentIconY(id) {
		return document.getElementById(id).offsetTop + 30;
	}
	function getCurrentTime() {
		var now = new Date();
		var year = now.getFullYear(); //年
		var month = now.getMonth() + 1; //月
		var day = now.getDate(); //日
		var hh = now.getHours(); //时
		var mm = now.getMinutes(); //分
		var ss = now.getSeconds(); //分
		var clock = year + "/";
		clock += (month < 10) ? "0" + month + "/" : month + "/";
		clock += (day < 10) ? "0" + day + " " : day + " ";
		clock += (hh < 10) ? "0" + hh + ":" : hh + ":";
		clock += (mm < 10) ? "0" + mm + ":" : mm + ":";
		clock += (ss < 10) ? "0" + ss : ss;
		return (clock);
	}
</script>
</head>

<body>
	This is my HTML page.
	<br>
	<input type="image" src="icon/Comment.png" class="iconComment"
		id="iconComment1" onmousedown="showComment(1)" />
	<br> this is really interesting
</body>
</html>
